/*
1.html结构尽量不要超过5层 
2.html标签多使用公共类样式,样式的组件化
3.规定好项目的层级规范
  popout 弹出层  90~99
  mask 蒙层  70~79
  nav  导航层 40~50
  content  内容层 0~10
*/

/* 版心 */
.container {
	margin: 0 auto;
	width: 1200px;
}
/* 定位布局 */
.rel {
	position: relative;
}
.abs {
	position: absolute;
}
.fix {
	position: fixed;
}
.cf {
	content: "";
	display: block;
	height: 0;
	clear: both;
}
.fl {
	float: left;
}
.fr {
	float: right;
}
.b-box {
	box-sizing: border-box;
}
/* 布局 */
.flex-s-c {
	display: flex;
	justify-content: start;
	align-items: center;
}
.flex-s {
	display: flex;
	justify-content: start;
}
.flex-c-c {
	display: flex;
	justify-content: center;
	align-items: center;
}
.flex-sb-c {
	display: flex;
	justify-content: space-between;
	align-items: center;	
}
.flex-sb {
	display: flex;
	justify-content: space-between;	
}
.flex-w{
	flex-wrap: wrap;
}
.flex-nw{
	flex-wrap: nowrap;
}
.flex-se-c {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}
.flex-se {
	display: flex;
	justify-content: space-evenly;
}
.flex-ai-e {
	display: flex;
	align-items: flex-end;
}
.flex-ai-c {
	display: flex;
	align-items: center;
}
/* margin */
.b-box {
	box-sizing: border-box;
}
.ml-10 {
	margin-left: 10px;
}
.ml-54 {
	margin-left: 54px;
}
.mr-20 {
	margin-right: 20px;
}
.mr-28 {
	margin-right: 20px;
}
.mt-10 {
	margin-top: 10px;
}
.mt-15 {
	margin-top: 15px;
}
.mt-20 {
	margin-top: 20px;
}
.mt-98 {
	margin-top: 98px;
}
.mt-28 {
	margin-top: 28px;
}
.mt-36 {
	margin-top: 36px;
}
.mt-25 {
	margin-top: 25px;
}
.mb-14 {
	margin-bottom: 14px;
}
.mb-35 {
	margin-bottom: 35px;
}
.mb-80 {
	margin-bottom: 80px;
}

/* padding */
.pt-10 {
	padding-top: 10px;
}
.pl-30 {
	padding-left: 30px;
}
.pl-35 {
	padding-left: 35px;
}
.pr-30 {
	padding-right: 30px;
}
.pt-90 {
	padding-top: 90px;
}
.ptb-35-10{
	padding: 35px 0px 10px 0px;
}
/* 背景色 */
.bg-red {
	background-color: red;
}
.bg-blue {
	background-color: #0d60cf;
}
.bg-gray{
	background-color: #f8f9fb;
}
.bg-orig{
	background-color: #ed510a;
	border: 1px solid #ed510a;
}
/* 文字 */
.fz-9 {
	font-size: 9px;
}

.fz-10 {
	font-size: 10px;
}

.fz-12 {
	font-size: 12px;
}
.fz-13{
	font-size: 12px;
}
.fz-14 {
	font-size: 14px;
}
.fz-16 {
	font-size: 16px;
}
.fz-18 {
	font-size: 18px;
}
.fz-30 {
	font-size: 30;
}
.fz-36 {
	font-size: 36;
}
.ta-c {
	text-align: center;
}
.text-r{
	text-align: right;
}
.text-l{
	text-align: left;
}
.fw-b {
	font-weight: bold;
}
.fz-lh{
	line-height: 23px;
}
.fz-b{
	font-weight: bold;
}
/* 文字颜色 */
.fc-black {
	color: #000;
}
.fc-white {
	color: #fff;
}
.fc-blue{
	color: #0d60cf;
}
.fc-red {
	color: red;
}
.fc-green{
	color:#66d3a9
}
.fc-ccc{
	color: #7d858d;
}
/* 盒子阴影 */
.box-s {
	box-shadow: 5px 5px 5px #1271ef;
}

/* 文本公共样式 */

.title-h2 {
	font-size: 36px;
	margin-bottom: 14px;
}
.title-pc {
	color: #807570;
}
.title-a {
	margin-top: 28px;
}
/* 图片大小 */
.img-w-h{
	width: 160px;
	height: 90px;
}
/* 隐藏 */
.op{
	opacity: 0;
}
/* 点击手指 */
.cp{
	cursor: pointer;
}
/* 多行隐藏 */
/* .ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	/*将对象作为弹性伸缩盒子模型显示*/
	/* -webkit-line-clamp: 4; */
	/*多行在这里修改数字即可*/
	/* -webkit-box-orient: vertical; */
	/*从上到下垂直排列子元素*/
/* }  */